/*
 * @Author: tomystery
 * @Date:   2017-09-11 11:12:54
 * @Last modified by:
 * @Last modified time: 2018-10-30T10:29:45+08:00
 * @filename:page/util/pagination/index.js
 */


require('./index.css')
var _mm = require('util/mm.js')
var templatePagination = require('./index.string')


var Pagination = function () {
    // var _this=this;
    this.defaultOption = {
        // 挂载容器
        container: null,
        //当前页
        pageNum: 1,
        //左右浮动的范围 假设现在在第5页，我要留下它的第四页，第三页，第二页
        pageRange: 3,
        // 每页显示的数量
        pageSize: 2,
        // 选择每页显示的数量
        selectOption: [2, 5, 10],
        //再加一个回调
        onSelectPage: null,
        // // 首页的字符
        // startPageName: '首页',
        // // 尾页的字符
        // endPageName: '尾页',
        // 上一页的字符
        previousPageName: '<',
        // 下一页的字符
        nextPageName: '>',
    }
}


//渲染分页组件  方法
Pagination.prototype.render = function (userOption) {
    // 合并 options
    this.option = $.extend({}, this.defaultOption, userOption)
    // 计算总页数
    this.option.pages =this.option.sum
    //判断是否为合法的jquery对象
    if (!(this.option.container instanceof jQuery)) {
        return
    }
    //判断是否只有一页
    if (this.option.pages <= 1) {
        if($('.pagination').length>0){
            $('.pagination').html('')
        }
        return
    }

    this.option.container.on('click', '.pg-item', (e) => {
        e.stopImmediatePropagation();
        var t = e.target
        //对于 disabled 和 active 不作处理（已在 css 中处理）
        // 回调
        typeof this.option.onSelectPage === 'function' ? this.option.onSelectPage(t.dataset.value) : null
    })
    // 切换每页显示数量时
    this.option.container.on('click', '.pg-item-select', (e) => {
        e.stopImmediatePropagation();
        // 保存数值
        var target = e.target
        target.closest('#pg-seId').dataset.pageSize = target.dataset.value
        // 跳到第一页
        typeof this.option.onSelectPage === 'function' ? this.option.onSelectPage(1) : null
    })
    //btn-go事件的处理
    this.option.container.on('click', '.btn-go', (e) => {
        e.stopImmediatePropagation();
        var $pgGo = $('input.pg-go')
        var activeVal = $('.pg-item.active').data('value')
        var pgGoVal = $pgGo.val()
        if (activeVal == pgGoVal) {
            // 输入了当前页时，不跳转, 输入框获得焦点
            $pgGo.focus()
        } else if (pgGoVal == '') {
            // 输入框为空时, 输入框获得焦点
            $pgGo.focus()
        } else if (pgGoVal > this.option.pages) {
            // 超出最大值时候, 跳到最大值
            typeof this.option.onSelectPage === 'function' ? this.option.onSelectPage(this.option.pages) : null
        } else {
            typeof this.option.onSelectPage === 'function' ? this.option.onSelectPage(parseInt(pgGoVal)) : null
        }
    })

    //渲染分页内容
    this.option.container.html(this.getPaginationHtml())
}
//获取分页的html
//首页 |上一页| 2 3 4 =5= 6 7 8|下一页| 末页 5/9
Pagination.prototype.getPaginationHtml = function () {
    var html = ''
    var option = this.option
    var pageArray = []
    var selectOption = option.selectOption
    //用于存放新的selectOption的值
    var selectOptionNew = []
    var start = option.pageNum - option.pageRange > 0 ? option.pageNum - option.pageRange : 1
    var end = option.pageNum + option.pageRange < option.pages ? option.pageNum + option.pageRange : option.pages
    //上一页按钮的数据
    pageArray.push({
        name: option.previousPageName,
        value: option.pageNum - 1,
        disabled: option.pageNum == 1,
    })
    // 第一页（一直在）
    pageArray.push({
        name: 1,
        value: 1,
        active: option.pageNum == 1,
    })
    // 1后面的省略号
    if (start > 2) {
        pageArray.push({
            name: '...',
            value: 'null',
            disabled: true,
        })
    }
    //数字按钮的处理（排除掉第一页和最后一页 start需要+1 end需要-1）
    for (var i = start+1; i <= end-1; i++) {
        pageArray.push({
            name: i,
            value: i,
            active: (i === option.pageNum),
            num: !(i === option.pageNum),
        })
    }
    // 最后一页前面的省略号
    if (option.pages > option.pageNum + option.pageRange) {
        pageArray.push({
            name: '...',
            value: 'null',
            disabled: true,
        })
    }
    // 最后一页（一直在）
    pageArray.push({
        name: option.pages,
        value: option.pages,
        active: option.pageNum == option.pages,
    })
    //下一页按钮的数据
    pageArray.push({
        name: option.nextPageName,
        value: option.pageNum + 1,
        disabled: option.pageNum == option.pages,
    })

    //selectOption =[1,2,3]
    for (var i = 0; i < selectOption.length; i++) {
        selectOptionNew.push({
            name: selectOption[i],
            value: selectOption[i],
            active: (selectOption[i] === option.pageSize),
        })
    }

    html = _mm.renderHtml(templatePagination, {
        pageArray: pageArray,
        pageNum: option.pageNum,
        pages: option.pages,
        pageSize: option.pageSize,
        selectOptionNew: selectOptionNew
    })
    return html
}


module.exports = Pagination
